<template>
  <div>
    <a-page-header
      :ghost="false"
      title="试卷管理/THE EXAMINATION PAPER MANAGEMENT"
    />
    <a-card
      :bordered="false"
      style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
    >
      <p class="notice">
        试卷为试题内容的组合，考试相关设置如：通过分数、开放时间等，请前往考试中设置
        创建试卷
      </p>
    </a-card>
    <a-card
      :bordered="false"
      style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
    >
      <a-card :bordered="false">
        <a-row :gutter="16">
          <a-col :span="20">
            <a-form-model layout="inline">
              <a-form-model-item label="试卷名称">
                <a-input placeholder="请输入试卷名称" v-model="paperName" />
              </a-form-model-item>

              <a-form-model-item>
                <a-button type="primary" @click="findPaper">
                  搜索
                </a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button @click="resetSearch">
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </a-col>
          <a-col :span="4">
            <a-form-model layout="inline">
              <a-form-model-item>
                <a-button
                  type="primary"
                  @click="showModal"
                  style="width: 100px;"
                >
                  创建试卷
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </a-col>
        </a-row>
      </a-card>
      <a-spin :spinning="spinning">
        <a-table
          style="margin-top: 16px;"
          tableLayout="auto"
          :columns="columns"
          :data-source="data"
        >
          <span slot="name" slot-scope="text">{{ text }}</span>
          <span slot="questionTitle">试卷名称</span>
          <!-- <span slot="action" slot-scope="text,index"> -->
          <template slot="action" slot-scope="text, record">
            <span slot="action">
              <a @click="showTestesModal(record)">查看</a>
              <a-divider type="vertical" />
              <!-- <a>编辑</a> -->
              <!-- <a-divider type="vertical" /> -->
              <a-popconfirm
                title="确保没有考试使用此套试卷?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delTestes(record)"
              >
                <a style="color: #FF4D4F;">删除</a>
              </a-popconfirm>
            </span>
          </template>
        </a-table>
      </a-spin>
    </a-card>
    <a-modal :footer="null" v-model="visible" title="选择出题方式">
      <a-card :bordered="false">
        <a-card-grid style="width:30%;text-align:center">
          <a-icon class="icon-32" type="bars" />
          <p class="title">手动录入</p>
          <p style="color:red">(未开放)</p>
          <p class="description">手动录入/批量导入试题</p>
        </a-card-grid>
        <a-card-grid
          style="width:30%;text-align:center;margin-left: 5%;"
          @click="goToCreateTest"
        >
          <a-icon class="icon-32" type="folder-add" />
          <p class="title">从题库选择</p>
          <p><br /></p>
          <p class="description">从题库中选择试题组卷</p>
        </a-card-grid>
        <a-card-grid style="width:30%;text-align:center;margin-left: 5%;">
          <a-icon class="icon-32" type="sync" />
          <p class="title">随机组卷</p>
          <p style="color:red">(未开放)</p>
          <p class="description">设置组卷规则，从题库抽题组卷</p>
        </a-card-grid>
      </a-card>
    </a-modal>
    <a-modal
      v-model="testesDetailVisible"
      :title="'试卷详情(' + records.name + ')'"
      :maskClosable="false"
      :footer="null"
      :destroyOnClose="true"
      :width="1080"
    >
      <a-table
        :columns="columnsDetail"
        :data-source="dataDetail"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="qid"> 题目编号</span>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "questionTitle" },
    scopedSlots: { customRender: "name" }
  },
  {
    title: "题量",
    dataIndex: "countTotal",
    key: "countTotal"
  },
  {
    title: "单选",
    dataIndex: "countRadio",
    key: "countRadio"
  },
  {
    title: "多选",
    dataIndex: "countMultiSelect",
    key: "countMultiSelect"
  },
  {
    title: "判断",
    dataIndex: "countTrueOrFalse",
    key: "countTrueOrFalse"
  },
  {
    title: "填空",
    dataIndex: "countGap",
    key: "countGap"
  },
  {
    title: "问答",
    dataIndex: "countEssay",
    key: "countEssay"
  },
  {
    title: "总分",
    key: "score",
    dataIndex: "score"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
const columnsDetail = [
  {
    dataIndex: "qid",
    key: "qid",
    slots: { title: "qid" },
    scopedSlots: { customRender: "name" }
  },
  {
    title: "题目",
    dataIndex: "name",
    key: "name",
    width: 380
  },
  {
    title: "题目类型",
    dataIndex: "type",
    key: "type"
  },
  {
    title: "答案",
    dataIndex: "answer",
    key: "answer"
  },
  {
    title: "分值",
    dataIndex: "score",
    key: "score"
  }
];

export default {
  data() {
    return {
      spinning: false,
      paperName: "", // 用于模糊查询
      data: [], // 表格数据
      dataDetail: [],
      records: {},
      columns,
      columnsDetail,
      visible: false,
      testesDetailVisible: false
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    showTestesModal(record) {
      this.records = record;
      console.log(record);
      this.$axios
        .get("/get/testes/info/" + record.id, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            // this.dataDetail = res.data.data;
            this.dataDetail = JSON.parse(res.data.data.testQuestions);
          } else {
            this.$message.error(res.data.msg);
          }
        });
      this.testesDetailVisible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    getTestesInfo() {
      this.spinning = true;
      this.$axios
        .get("/get/testes/info", {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.data = res.data.data;
            // 信息预处理
            for (let i = 0; i < res.data.data.length; i++) {
              var obj = JSON.parse(res.data.data[i].testInformation);
              this.data[i].key = this.data[i].id;
              this.data[i].name = this.data[i].testName;
              this.data[i].countTotal = obj[2].total;
              this.data[i].score = obj[2].totalScore;
              this.data[i].countRadio = obj[0].Radio;
              this.data[i].countGap = obj[0].Gap;
              this.data[i].countMultiSelect = obj[0].MultiSelect;
              this.data[i].countTrueOrFalse = obj[0].TorF;
              this.data[i].countEssay = obj[0].Essays;
              this.data[i].createTime = this.data[i].createdTime.replace(
                "T",
                " "
              );
            }
          } else {
            this.$message.error("获取失败");
          }
        });
      this.spinning = false;
    },
    goToCreateTest() {
      this.$router.push({ path: "/home/exam/examinationPaperCreated" });
    },
    delTestes(record) {
      this.$axios
        .delete("/delete/testes/info/" + record.id, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.getTestesInfo();
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    findPaper() {
      if (this.paperName.match(/^[ ]*$/)) {
        return this.$message.error("不能为空");
      }
      this.spinning = true;
      if (this.paperName.replace(/(^s*)|(s*$)/g, "").length == 0) {
        this.getTestesInfo();
        return;
      }
      this.$axios
        .get("/find/paper/" + this.paperName, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.data = res.data.data;
            // 信息预处理
            for (let i = 0; i < res.data.data.length; i++) {
              var obj = JSON.parse(res.data.data[i].testInformation);
              this.data[i].key = this.data[i].id;
              this.data[i].name = this.data[i].testName;
              this.data[i].countTotal = obj[2].total;
              this.data[i].score = obj[2].totalScore;
              this.data[i].countRadio = obj[0].Radio;
              this.data[i].countGap = obj[0].Gap;
              this.data[i].countMultiSelect = obj[0].MultiSelect;
              this.data[i].countTrueOrFalse = obj[0].TorF;
              this.data[i].countEssay = obj[0].Essays;
              this.data[i].createTime = this.data[i].createdTime.replace(
                "T",
                " "
              );
            }
          } else {
            this.$message.error(res.data.msg);
          }
        });
      this.spinning = false;
    }, // 重置搜索
    resetSearch() {
      this.paperName = "";
      this.getTestesInfo();
    }
  },
  created() {
    this.getTestesInfo();
  }
};
</script>

<style scoped>
.notice {
  color: #1890ff;
  font-size: 16px;
  padding-top: 16px;
}
.icon-32 {
  font-size: 32px;
  color: #1890ff;
}
.title {
  margin-top: 10px;
  font-size: 16px;
}
.description {
  font-size: 12px;
  color: #7d8184;
}
.ant-card-grid-hoverable:hover {
  position: relative;
  z-index: 1;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
  background: #e2f0ff;
}
.ant-card-grid {
  box-shadow: 0 0 0 0 #fff;
  display: block;
  cursor: pointer;
}
</style>
